<template>
    <div class="infos">
        <h4>{{infotext.title}}</h4>
        <p style="text-align:left">
            <span> 创建时间:{{(infotext.add_time+'').substr(0,10)}}</span>
             <span style="float:right">点击{{infotext.click}}</span>
        </p>
        <hr>
        <!-- 预览图片 -->
        <ul>
            <li v-for="(item,id) in infoimg" :key='id' class="firstimg" >
                <img :src=item.src alt="" class="imglist" @click="infoimgsize(item.src)">
                <!-- 遮罩层 -->
                <van-overlay :show="show" @click="show = false" class="overlay">
                    <div class="wrapper">
                        <div class="block" @click.stop>
                             <img :src=infosrc alt="">
                        </div>
                    </div>
                </van-overlay>
            </li>
        </ul>
         <!-- 说明 -->
             <p v-html="infotext.content"></p>
        <!-- 评论 -->
        <myment></myment>
    </div>
</template>
<script>
// 获取评论结构
import ment from '../Goods/Goodscomment'
export default {
    data() {
        return {
          
            // 文本
            infotext:{},
            //图片
            infoimg:[],
            show:false,
            // 当前点击的图片地址
            infosrc:'',
            // 评论数据
            
        }
    },
    components:{
        'myment':ment
    },
    created() {
        this.getlist()
    },
    methods: {
        // 获取内容
       async getlist(){
        //    const arr= window.location.hash.split('/')
        //    const a=arr[3]
          const id=this.$route.query.userid
          console.log(id)
          
           const {data:res}=await this.$http.get('/api/getimageInfo/'+id)
           this.infotext=res.message[0]
           
        // 获取图片
           const {data:res2}=await this.$http.get('/api/getthumimages/'+id)
            this.infoimg=res2.message
            // console.log(typeof this.infotext.add_time)
            // console.log('阿斯蒂芬')  
           
        },
        infoimgsize(src){
            this.show=true
            this.infosrc=src
        },
        // 评论功能
        
    // 评论功能结束
    },
}
</script>
<style lang="less" scoped>
   .infos {
       h4 {
           text-align: center;
           color:#26a2ff;
           font-size:15px;
       }
       p{
           margin: 0 10px;
           font-size: 14px;
       }
      
   }
   .firstimg {
       float: left;
       width: 30%;
       padding-left: 10px;
       padding-top: 10px;
   }
    .imglist {
        width: 100%;
        box-shadow: 1px 0 8px 1px rgba(0,0,0,.3);
   }
//    遮罩层样式
    .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    }

    .block {
    width: 240px;
    height: 240px;
    background-color: #fff;
    }
    .overlay {
        background-color:rgba(0,0,0,0.3);
    }
    ul {
        overflow: hidden;
    }
    // 评论样式
    
</style>